<template>
   <div id="cnyzs-announcement" class="cnyzs-announcement">
      <!-- <div class="guanggao">
         <img style="width: 100%; height: 100%"
            src="https://alan-1252409695.cos.ap-guangzhou.myqcloud.com/images%2F1040X100.jpg" />
      </div> -->
      <div class="list" v-if="Anlist.length > 0">
         <ul>
            <li v-for="(item, index) in Anlist" :key="index"
               :class="[{ active: active === index }, { noActive: active !== index }]" @click="active = index">
               <div class="title">
                  <div>
                     <span v-if="index === 0">最新公告</span>
                     {{ item.title }}
                  </div>
                  <span>{{ Utils.timeDisplay(item.createAt) }}</span>
               </div>
               <div class="content">{{ item.content }}</div>
               <div class="btn">
                  <template v-for="(b, i) in item.btn" :key="i">
                     <button v-if="b.path">{{ b.name }}</button>
                  </template>
               </div>
            </li>
         </ul>
      </div>
      <div class="Nolist" v-else>
         <div class="box">
            没有公告
         </div>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
const { cnyzs } = storeToRefs(cnyzsCommonpinia())
const { query: { id } } = useRoute() as string | any
const active = ref(0)

// id：是系统标识
// 查询当前子系统公告列表
// 判断是否有ID ，没有ID 则代表访问主站公告列表
const Anlist = ref<any>([])
const isID = async () => {
   // 发请求查询 30条公告列表
   const res: any = await cnyzsRequest('/api/cnyzs-system-announcement/querylist', { method: 'POST', data: { id: id } })
   Anlist.value = res.data
}
isID()
onMounted(() => {
   document.body.style.setProperty('--aoir-color-primary', cnyzs.value.COMMON_THEMECOLOR);
})
</script>
<style lang="scss" scoped>
#cnyzs-announcement {
   margin: 0 auto 20px;
   width: var(--aoir-m-width);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;


   .list {
      width: 900px;
      // background-color: #ffffffa7;
      border-radius: var(--aoir-border-radius);
      box-shadow: var(--aoir-box-shadow);
      padding: 15px;

      ul {
         width: 100%;

         li {
            width: 100%;
            height: 70px;
            background-color: #FFF;
            box-shadow: var(--aoir-box-shadow);
            border-radius: var(--aoir-border-radius);
            padding: 20px;
            box-shadow: 0px 0px 30px 0px rgba(181, 181, 181, 0.25);
            margin-bottom: 20px;
            overflow: hidden;
            transition: all .3s ease-in-out;

            &:nth-last-child(1) {
               margin-bottom: 0;
            }

            .title {
               font-size: 22px;
               font-weight: 600;
               color: #444;
               margin-bottom: 20px;
               display: flex;
               justify-content: space-between;
               align-items: center;

               span {
                  font-weight: 400;
                  font-size: 18px;
                  color: #999;
               }

               div {
                  display: flex;
                  align-items: center;

                  span {
                     padding: 6px 14px;
                     border-radius: 6px;
                     background-color: rgb(255 229 149);
                     color: #484848;
                     cursor: pointer;
                     margin-right: 15px;
                     font-size: 16px;
                     /* font-weight: 600; */
                     box-shadow: 0px 0px 30px 0px rgba(181, 181, 181, 0.25);
                  }
               }
            }

            .content {
               font-size: 17px;
               color: #8d90a0;
               min-height: 250px;
               background-color: #f1f1f1;
               box-shadow: var(--aoir-box-shadow);
               border-radius: var(--aoir-border-radius);
               padding: 15px;
            }

            .btn {
               width: 100%;
               padding: 10px 0 0;
               display: flex;
               justify-content: flex-end;

               button {
                  border: 0;
                  padding: 6px 14px;
                  border-radius: 6px;
                  background-color: var(--aoir-color-primary);
                  color: #FFF;
                  font-weight: 600;
                  cursor: pointer;
                  margin-left: 15px;
               }
            }
         }

         .active {
            // transition: all .3s ease-in-out;
            // height: auto;
            animation: donghua .3s forwards;

            @keyframes donghua {
               0% {
                  height: 70px;
               }

               100% {
                  height: auto;
               }
            }
         }

         .noActive {
            animation: donghua2 .3s forwards;

            @keyframes donghua2 {
               0% {
                  height: auto;
               }

               100% {
                  height: 70px;
               }
            }
         }
      }
   }

   .Nolist {
      width: 1000px;
      height: 500px;
      background-color: #FFF;
      border-radius: var(--aoir-border-radius);
      box-shadow: var(--aoir-box-shadow);
      padding: 15px;
      margin-top: 50px;

      .box {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 22px;
         background-color: #FFF;
         border-radius: var(--aoir-border-radius);
         box-shadow: 0px 0px 40px 0px rgba(181, 181, 181, 0.25);
         color: #555;
      }
   }
}


// .guanggao {
//    width: 100%;
//    height: 160px;
//    background-color: #FFF;
//    border-radius: var(--aoir-border-radius) var(--aoir-border-radius);
//    box-shadow: var(--aoir-box-shadow);
//    padding: 15px;
//    margin-bottom: 5px;

//    img {
//       border-radius: var(--aoir-border-radius);
//       cursor: pointer;
//    }
// }
</style>